<template>
    <div id="container">
        <div id="video">
            <video src="../../assets/video/123.mp4" autoplay="autoplay" muted="muted" loop="loop" class="video"></video>
        </div>

        <div id="froms">
        
        <CommonLogin :common="common" @switchs="sms=true,common=false" @wechats="wechat=true,common=false"/>
        <SmsLogin :sms="sms" @names="common=true,sms=false"/>
        <WechatLogin :wechat="wechat" @commons="common=true,wechat=false"/>
        
    
        </div>
    </div>
</template>
<script>
    import CommonLogin from "./commonLogin.vue"
    import SmsLogin from "./smsLogin.vue"
    import WechatLogin from "./wechatLogin.vue"
    export default {
        name:"login",
        components: {
            CommonLogin,
            SmsLogin,
            WechatLogin
        },
        data(){
            return{
                //定义三个属性
                common:true,
                sms:false,
                wechat:false
            }
        }
    }
</script>
 

<style lang="less" scoped>
/* //修改element样式
// 1.打开调试器 */
#container{
    display: flex;
}

#froms{
    background-color: rgba(203, 208, 225, 0.5);
    width: 400px;
    padding: 100px 0 50px 0;

    position: fixed;
    right: 10%;
    top: 20%;
    border-radius: 5px;
    
}

#video{
    position: fixed;
    left: 0;
    top: -80px;
    right: 0;
    bottom: 0;
    z-index:-1;  
}



</style>